<template>
  <div class="fill-width-height app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5"><el-button type="primary" plain icon="el-icon-plus" @click="addApplication">新增</el-button></el-col>
    </el-row>

    <el-table :data="applicationList" stripe>
      <el-table-column prop="code" label="应用代码" width="120"></el-table-column>
      <el-table-column prop="title" label="应用标题" width="150"></el-table-column>
      <el-table-column prop="subtitle" label="应用副标题" width="180"></el-table-column>
      <el-table-column prop="customIcon" label="自定义图标前缀" width="150"></el-table-column>
      <el-table-column prop="icon" label="图标名称" width="120"></el-table-column>
      <el-table-column prop="appUrl" label="应用跳转URL" ></el-table-column>
      <el-table-column prop="status" label="是否启用" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-value="0"
            inactive-value="1"
            @change="toggleStatus(scope.row.id, scope.row.status)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="editApplication(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteApplication(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" title="应用配置">
      <el-form :model="formData" label-width="120px">
        <el-form-item label="应用代码">
          <el-input v-model="formData.code"></el-input>
        </el-form-item>
        <el-form-item label="应用标题">
          <el-input v-model="formData.title"></el-input>
        </el-form-item>
        <el-form-item label="应用副标题">
          <el-input v-model="formData.subtitle"></el-input>
        </el-form-item>
        <el-form-item label="自定义图标前缀">
          <el-input v-model="formData.customIcon"></el-input>
        </el-form-item>
        <el-form-item label="图标名称">
          <el-input v-model="formData.icon"></el-input>
        </el-form-item>
        <el-form-item label="应用跳转URL">
          <el-input v-model="formData.appUrl"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveApplication">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list,save,update,deleteByIds,toggleAppStatus } from '@/api/imgManage/appManage'
export default {
  data() {
    return {
      applicationList: [],
      dialogVisible: false,
      formData: {
        id: '',
        code: '',
        title: '',
        subtitle: '',
        customIcon: '',
        icon: '',
        appUrl: ''
      },
      isAdd: true
    };
  },
  mounted() {
    this.getApplicationList();
  },
  methods: {
    getApplicationList() {
      list().then(response => {
        this.applicationList = response.data;
      })
    },
    addApplication() {
      this.isAdd = true;
      this.formData = {
        id: '',
        code: '',
        title: '',
        subtitle: '',
        customIcon: '',
        icon: '',
        appUrl: ''
      };
      this.dialogVisible = true;
    },
    editApplication(row) {
      this.isAdd = false;
      this.formData = { ...row };
      this.dialogVisible = true;
    },
    deleteApplication(id) {
      this.$confirm('确定要删除该应用配置吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteByIds({ ids: id }).then(response => {
          if (response.code == 200) {
            this.$message.success('删除成功');
            this.getApplicationList();
          } else {
            this.$message.error('删除失败');
          }
        })
          .catch(error => {
            console.error(error);
            this.$message.error('删除失败');
          });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    saveApplication() {
      if (this.isAdd) {
        save(this.formData).then(response => {
          debugger
          if (response.code == 200) {
            this.$message.success('新增成功');
            this.dialogVisible = false;
            this.getApplicationList();
          } else {
            this.$message.error('新增失败');
          }
        }).catch(error => {
          console.error(error);
          this.$message.error('新增失败');
        });
      } else {
        update(this.formData).then(response => {
          if (response.code == 200) {
            this.$message.success('修改成功');
            this.dialogVisible = false;
            this.getApplicationList();
          } else {
            this.$message.error('修改失败');
          }
        }).catch(error => {
          console.error(error);
          this.$message.error('修改失败');
        });
      }
    },
    toggleStatus(id, status) {
      toggleAppStatus({ id, status }).then(response => {
        if (response.code == 200) {
          this.$message.success('状态更新成功');
        } else {
          this.$message.error('状态更新失败');
          this.getApplicationList();
        }
      }).catch(error => {
        console.error(error);
        this.$message.error('状态更新失败');
        this.getApplicationList();
      });
    }
  }
};
</script>
